feat: playground#104
Conversation
…dling, including new copy script for Tailwind compatibility
…nd improve error logging for missing source files
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
|
✅ Shadcn registry validated — no registry changes detected. |
…enhance RouteList component for route selection
…ckBlitz embed functionality
…ctive, updating route generation logic accordingly
…with type definitions for better module resolution
…context provider and widget display logic
…redundant plugin-routes file
…s and AI chat integration
…ges alongside runtime dependencies
…nhance seed route generation logic
The codegen-e2e workflow was missing packages/ui/** in its paths filter, even though @btst/stack depends on @workspace/ui. This meant PRs that only modified UI components would skip E2E tests during review, potentially allowing breakage to reach main.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: Inconsistent
reuseExistingServeracross framework web servers- Changed tanstack's reuseExistingServer from true to false to match nextjs and react-router, preventing stale in-memory test data issues.
Preview (a1ade0b28f)
diff --git a/.agents/skills/btst-build-config/SKILL.md b/.agents/skills/btst-build-config/SKILL.md
--- a/.agents/skills/btst-build-config/SKILL.md
+++ b/.agents/skills/btst-build-config/SKILL.md
@@ -59,27 +59,27 @@
}-## Updating all three example apps
+## Updating all three codegen projects
When adding a new plugin or changing plugin config, update ALL three:
-Next.js (examples/nextjs/)
-- lib/stack.tsx — backend plugin registration
+Next.js (codegen-projects/nextjs/)
+- lib/stack.ts — backend plugin registration
lib/stack-client.tsx— client plugin registration
--app/pages/[[...all]]/layout.tsx— override configuration
+-app/pages/layout.tsx— override configurationapp/globals.css—@import "@btst/stack/plugins/{name}/css";
-React Router (examples/react-router/)
-- app/lib/stack.tsx
+React Router (codegen-projects/react-router/)
+- app/lib/stack.ts
app/lib/stack-client.tsxapp/routes/pages/_layout.tsxapp/app.css
-TanStack (examples/tanstack/)
-- src/lib/stack.tsx
+TanStack (codegen-projects/tanstack/)
+- src/lib/stack.ts
src/lib/stack-client.tsxsrc/routes/pages/route.tsx
--src/styles/app.css
+-src/styles.css
Override type registration (in each layout)
@@ -119,6 +119,6 @@
Gotchas
- Missing
typesVersions— always add alongsideexports; TypeScript won't resolve the new path otherwise.
-- Build cache — runpnpm turbo cleanif changes aren't reflected in examples afterpnpm build.
+- Build cache — runpnpm turbo cleanif changes aren't reflected in codegen projects afterpnpm build. - CSS not loading — ensure
"./plugins/{name}/css"entry exists inpackage.jsonexports;postbuild.cjshandles the rest automatically. @workspace/uisub-path components — if a new component imports from a directory (not a single file), add it toEXTERNAL_REGISTRY_COMPONENTSinbuild-registry.ts.
diff --git a/.agents/skills/btst-client-plugin-dev/SKILL.md b/.agents/skills/btst-client-plugin-dev/SKILL.md
--- a/.agents/skills/btst-client-plugin-dev/SKILL.md
+++ b/.agents/skills/btst-client-plugin-dev/SKILL.md
@@ -11,6 +11,7 @@
src/plugins/{name}/
client/
plugin.tsx ← defineClientPlugin entry
- hooks.ts ← "use client" React hooks only
components/
pages/
my-page.tsx ← wrapper: ComposedRoute + lazy import
@@ -18,6 +19,22 @@
query-keys.ts ← React Query key factory
+## Server/client module boundary
+
+`client/plugin.tsx` must stay import-safe on the server. Next.js (including SSG build)
+can execute `createStackClient()` on the server, which calls each `*ClientPlugin()`
+factory. If that module is marked `"use client"` or imports a client-only module, build
+can fail with "Attempted to call ... from the server".
+
+Rules:
+
+- Do **not** add `"use client"` to `client/plugin.tsx`.
+- Keep `client/plugin.tsx` free of React hooks (`useState`, `useEffect`, etc.).
+- Put hook utilities in a separate client-only module (`client/hooks.ts`) with
+ `"use client"`, and re-export them from `client/index.ts`.
+- UI components can remain client components as needed; only the plugin factory entry
+ must stay server-import-safe.
+
## Route anatomy
Each route returns exactly three things:
@@ -110,6 +127,7 @@
- **Next.js Link href undefined** — use `href={href || "#"}` pattern.
- **Suspense errors not caught** — add `if (error && !isFetching) throw error` in every suspense hook.
- **Missing ComposedRoute wrapper** — without it, errors crash the entire app instead of hitting ErrorBoundary.
+- **Client directive on `client/plugin.tsx`** — can break SSG/SSR when plugin factories are invoked server-side.
## Full code patterns
diff --git a/.agents/skills/btst-testing/SKILL.md b/.agents/skills/btst-testing/SKILL.md
--- a/.agents/skills/btst-testing/SKILL.md
+++ b/.agents/skills/btst-testing/SKILL.md
@@ -67,42 +67,77 @@
## E2E tests (Playwright)
+### E2E setup
+
+Playwright configuration lives in `e2e/playwright.codegen.config.ts`, command `pnpm codegen:e2e`. It starts the `codegen-projects/` apps (ports 3006–3008) and tests the CLI codegen output — accurately reflecting what a real `btst init` user gets.
+
+The codegen projects are built from scratch via `scripts/codegen/setup-*.sh`.
+
### Location and naming
Tests live in `e2e/tests/`. Naming convention: `smoke.{feature}.spec.ts`
Examples: `smoke.chat.spec.ts`, `smoke.blog.spec.ts`
+### Setting up codegen projects (required before running codegen E2E)
+
+The `codegen-projects/` directory is **not committed** — build it from scratch:
+
+```bash
+# Set up a specific framework
+bash scripts/codegen/setup-nextjs.sh
+bash scripts/codegen/setup-react-router.sh
+bash scripts/codegen/setup-tanstack.sh
+
+# Or set up all frameworks at once
+bash scripts/codegen/setup.sh
+
+# Cleanup when you want a fresh start
+bash scripts/codegen/cleanup.sh nextjs
+bash scripts/codegen/cleanup.sh react-router
+bash scripts/codegen/cleanup.sh tanstack
+```
+
+See `scripts/codegen/README.md` for full details.
+
### Run commands
```bash
-# All frameworks (starts all 3 servers)
cd e2e
-export $(cat ../examples/nextjs/.env | xargs)
-pnpm e2e:smoke
-# Single framework only
-pnpm e2e:smoke:nextjs
-pnpm e2e:smoke:tanstack
-pnpm e2e:smoke:react-router
+# Run all codegen E2E tests
+pnpm codegen:e2e
+# Target a specific framework
+pnpm codegen:e2e:nextjs
+pnpm codegen:e2e:tanstack
+pnpm codegen:e2e:react-router
+
# Specific test file
-pnpm e2e:smoke -- tests/smoke.chat.spec.ts
-
-# Specific Playwright project
-pnpm e2e:smoke -- --project="nextjs:memory"
+pnpm codegen:e2e:nextjs -- tests/smoke.blog.spec.ts
Playwright projects and ports
| Project | Port |
|---|---|
| - | nextjs:memory |
| - | tanstack:memory |
| - | react-router:memory |
| + | nextjs:codegen |
| + | tanstack:codegen |
| + | react-router:codegen |
-Defined in playwright.config.ts. By default all three servers start. Set BTST_FRAMEWORK=nextjs|tanstack|react-router to start only one — or use the per-framework scripts above. CI uses a matrix to run each in a separate parallel job.
+Set BTST_FRAMEWORK=nextjs|tanstack|react-router to start only one server.
+### In-memory state between test runs
+
+The in-memory adapter keeps data alive for the lifetime of the server process. If you re-run tests against an already-running server, earlier test data will still be present and can cause failures.
+
+To reset: kill the server and let reuseExistingServer: true restart it, or rebuild with start:e2e:
+
+bash +kill $(lsof -ti:3006) +pnpm -F nextjs run start:e2e # rebuilds .next and starts fresh +
+
API key guard pattern
Features requiring external APIs (OpenAI, etc.) must skip gracefully when the key is absent:
@@ -122,7 +157,7 @@
Environment variables
-export $(cat ../examples/nextjs/.env | xargs)
+# Env is loaded from codegen-projects/nextjs/.env automatically by playwright.codegen.config.ts-For CI, the workflow uses a matrix — each framework job sets BTST_FRAMEWORK and only starts its own server.
+For CI, the codegen workflow (.github/workflows/codegen-e2e.yml) builds the codegen project from scratch and passes OPENAI_API_KEY from secrets.
diff --git a/.agents/skills/shadcn/SKILL.md b/.agents/skills/shadcn/SKILL.md
new file mode 100644
--- /dev/null
+++ b/.agents/skills/shadcn/SKILL.md
@@ -1,0 +1,242 @@
+---
+name: shadcn
+description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
+user-invocable: false
+allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)
+---
+
+# shadcn/ui
+
+A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.
+
+> IMPORTANT: Run all CLI commands using the project's package runner: npx shadcn@latest, pnpm dlx shadcn@latest, or bunx --bun shadcn@latest — based on the project's packageManager. Examples below use npx shadcn@latest but substitute the correct runner for the project.
+
+## Current Project Context
+
+json +!`npx shadcn@latest info --json` +
+
+The JSON above contains the project config and installed components. Use npx shadcn@latest docs <component> to get documentation and example URLs for any component.
+
+## Principles
+
+1. Use existing components first. Use npx shadcn@latest search to check registries before writing custom UI. Check community registries too.
+2. Compose, don't reinvent. Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.
+3. Use built-in variants before custom styles. variant="outline", size="sm", etc.
+4. Use semantic colors. bg-primary, text-muted-foreground — never raw values like bg-blue-500.
+
+## Critical Rules
+
+These rules are always enforced. Each links to a file with Incorrect/Correct code pairs.
+
+### Styling & Tailwind → styling.md
+
+- className for layout, not styling. Never override component colors or typography.
+- No space-x-* or space-y-*. Use flex with gap-*. For vertical stacks, flex flex-col gap-*.
+- Use size-* when width and height are equal. size-10 not w-10 h-10.
+- Use truncate shorthand. Not overflow-hidden text-ellipsis whitespace-nowrap.
+- No manual dark: color overrides. Use semantic tokens (bg-background, text-muted-foreground).
+- Use cn() for conditional classes. Don't write manual template literal ternaries.
+- No manual z-index on overlay components. Dialog, Sheet, Popover, etc. handle their own stacking.
+
+### Forms & Inputs → forms.md
+
+- Forms use FieldGroup + Field. Never use raw div with space-y-* or grid gap-* for form layout.
+- InputGroup uses InputGroupInput/InputGroupTextarea. Never raw Input/Textarea inside InputGroup.
+- Buttons inside inputs use InputGroup + InputGroupAddon.
+- Option sets (2–7 choices) use ToggleGroup. Don't loop Button with manual active state.
+- FieldSet + FieldLegend for grouping related checkboxes/radios. Don't use a div with a heading.
+- Field validation uses data-invalid + aria-invalid. data-invalid on Field, aria-invalid on the control. For disabled: data-disabled on Field, disabled on the control.
+
+### Component Structure → composition.md
+
+- Items always inside their Group. SelectItem → SelectGroup. DropdownMenuItem → DropdownMenuGroup. CommandItem → CommandGroup.
+- Use asChild (radix) or render (base) for custom triggers. Check base field from npx shadcn@latest info. → base-vs-radix.md
+- Dialog, Sheet, and Drawer always need a Title. DialogTitle, SheetTitle, DrawerTitle required for accessibility. Use className="sr-only" if visually hidden.
+- Use full Card composition. CardHeader/CardTitle/CardDescription/CardContent/CardFooter. Don't dump everything in CardContent.
+- Button has no isPending/isLoading. Compose with Spinner + data-icon + disabled.
+- TabsTrigger must be inside TabsList. Never render triggers directly in Tabs.
+- Avatar always needs AvatarFallback. For when the image fails to load.
+
+### Use Components, Not Custom Markup → composition.md
+
+- Use existing components before custom markup. Check if a component exists before writing a styled div.
+- Callouts use Alert. Don't build custom styled divs.
+- Empty states use Empty. Don't build custom empty state markup.
+- Toast via sonner. Use toast() from sonner.
+- Use Separator instead of <hr> or <div className="border-t">.
+- Use Skeleton for loading placeholders. No custom animate-pulse divs.
+- Use Badge instead of custom styled spans.
+
+### Icons → icons.md
+
+- Icons in Button use data-icon. data-icon="inline-start" or data-icon="inline-end" on the icon.
+- No sizing classes on icons inside components. Components handle icon sizing via CSS. No size-4 or w-4 h-4.
+- Pass icons as objects, not string keys. icon={CheckIcon}, not a string lookup.
+
+### CLI
+
+- Never decode or fetch preset codes manually. Pass them directly to npx shadcn@latest init --preset <code>.
+
+## Key Patterns
+
+These are the most common patterns that differentiate correct shadcn/ui code. For edge cases, see the linked rule files above.
+
+```tsx
+// Form layout: FieldGroup + Field, not div + Label.
+
+
+
+// Validation: data-invalid on Field, aria-invalid on the control.
+
- Invalid email.
+
+// Icons in buttons: data-icon, no sizing classes.
+
- Search
+
+// Spacing: gap-, not space-y-.
+
+
+
+// Equal dimensions: size-, not w- h-*.
+ // correct
+ // wrong
+
+// Status colors: Badge variants or semantic tokens, not raw colors.
++20.1% // correct
++20.1% // wrong
+
+ +## Component Selection + +| Need | Use | +| -------------------------- | --------------------------------------------------------------------------------------------------- | +| Button/action | `Button` with appropriate variant | +| Form inputs | `Input`, `Select`, `Combobox`, `Switch`, `Checkbox`, `RadioGroup`, `Textarea`, `InputOTP`, `Slider` | +| Toggle between 2–5 options | `ToggleGroup` + `ToggleGroupItem` | +| Data display | `Table`, `Card`, `Badge`, `Avatar` | +| Navigation | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `Pagination` | +| Overlays | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation) | +| Feedback | `sonner` (toast), `Alert`, `Progress`, `Skeleton`, `Spinner` | +| Command palette | `Command` inside `Dialog` | +| Charts | `Chart` (wraps Recharts) | +| Layout | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible` | +| Empty states | `Empty` | +| Menus | `DropdownMenu`, `ContextMenu`, `Menubar` | +| Tooltips/info | `Tooltip`, `HoverCard`, `Popover` | + +## Key Fields + +The injected project context contains these key fields: + +- **`aliases`** → use the actual alias prefix for imports (e.g. `@/`, `~/`), never hardcode. +- **`isRSC`** → when `true`, components using `useState`, `useEffect`, event handlers, or browser APIs need `"use client"` at the top of the file. Always reference this field when advising on the directive. +- **`tailwindVersion`** → `"v4"` uses `@theme inline` blocks; `"v3"` uses `tailwind.config.js`. +- **`tailwindCssFile`** → the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one. +- **`style`** → component visual treatment (e.g. `nova`, `vega`). +- **`base`** → primitive library (`radix` or `base`). Affects component APIs and available props. +- **`iconLibrary`** → determines icon imports. Use `lucide-react` for `lucide`, `@tabler/icons-react` for `tabler`, etc. Never assume `lucide-react`. +- **`resolvedPaths`** → exact file-system destinations for components, utils, hooks, etc. +- **`framework`** → routing and file conventions (e.g. Next.js App Router vs Vite SPA). +- **`packageManager`** → use this for any non-shadcn dependency installs (e.g. `pnpm add date-fns` vs `npm install date-fns`). + +See [cli.md — `info` command](./cli.md) for the full field reference. + +## Component Docs, Examples, and Usage + +Run `npx shadcn@latest docs <component>` to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content. + +bash+npx shadcn@latest docs button dialog select
+```
+
+When creating, fixing, debugging, or using a component, always run
npx shadcn@latest docs and fetch the URLs first. This ensures you're working with the correct API and usage patterns rather than guessing.+
+## Workflow
+
+1. Get project context — already injected above. Run `npx shadcn@latest info` again if you need to refresh.
+2. Check installed components first — before running `add`, always check the `components` list from project context or list the `resolvedPaths.ui` directory. Don't import components that haven't been added, and don't re-add ones already installed.
+3. Find components — `npx shadcn@latest search`.
+4. Get docs and examples — run `npx shadcn@latest docs ` to get URLs, then fetch them. Use `npx shadcn@latest view` to browse registry items you haven't installed. To preview changes to installed components, use `npx shadcn@latest add --diff`.
+5. Install or update — `npx shadcn@latest add`. When updating existing components, use `--dry-run` and `--diff` to preview changes first (see Updating Components below).
+6. Fix imports in third-party components — After adding components from community registries (e.g. `@bundui`, `@magicui`), check the added non-UI files for hardcoded import paths like `@/components/ui/...`. These won't match the project's actual aliases. Use `npx shadcn@latest info` to get the correct `ui` alias (e.g. `@workspace/ui/components`) and rewrite the imports accordingly. The CLI rewrites imports for its own UI files, but third-party registry components may use default paths that don't match the project.
+7. Review added components — After adding a component or block from any registry, always read the added files and verify they are correct. Check for missing sub-components (e.g. `SelectItem` without `SelectGroup`), missing imports, incorrect composition, or violations of the Critical Rules. Also replace any icon imports with the project's `iconLibrary` from the project context (e.g. if the registry item uses `lucide-react` but the project uses `hugeicons`, swap the imports and icon names accordingly). Fix all issues before moving on.
+8. Registry must be explicit — When the user asks to add a block or component, do not guess the registry. If no registry is specified (e.g. user says "add a login block" without specifying `@shadcn`, `@tailark`, etc.), ask which registry to use. Never default to a registry on behalf of the user.
+9. Switching presets — Ask the user first: reinstall, merge, or skip?
-
- Reinstall:
npx shadcn@latest init --preset <code> --force --reinstall. Overwrites all components.
- Reinstall:
-
- Merge:
npx shadcn@latest init --preset <code> --force --no-reinstall, then runnpx shadcn@latest infoto list installed components, then for each installed component use--dry-runand--diffto smart merge it individually.
- Merge:
-
- Skip:
npx shadcn@latest init --preset <code> --force --no-reinstall. Only updates config and CSS, leaves components as-is.
- Skip:
-
- Important: Always run preset commands inside the user's project directory. The CLI automatically preserves the current base (
basevsradix) fromcomponents.json. If you must use a scratch/temp directory (e.g. for--dry-runcomparisons), pass--base <current-base>explicitly — preset codes do not encode the base.
- Important: Always run preset commands inside the user's project directory. The CLI automatically preserves the current base (
+## Updating Components
+
+When the user asks to update a component from upstream while keeping their local changes, use --dry-run and --diff to intelligently merge. NEVER fetch raw files from GitHub manually — always use the CLI.
+
+1. Run npx shadcn@latest add <component> --dry-run to see all files that would be affected.
+2. For each file, run npx shadcn@latest add <component> --diff <file> to see what changed upstream vs local.
+3. Decide per file based on the diff:
-
- No local changes → safe to overwrite.
-
- Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications.
-
- User says "just update everything" → use
--overwrite, but confirm first.
+4. Never use--overwritewithout the user's explicit approval.
- User says "just update everything" → use
+## Quick Reference
+
+bash +# Create a new project. +npx shadcn@latest init --name my-app --preset base-nova +npx shadcn@latest init --name my-app --preset a2r6bw --template vite + +# Create a monorepo project. +npx shadcn@latest init --name my-app --preset base-nova --monorepo +npx shadcn@latest init --name my-app --preset base-nova --template next --monorepo + +# Initialize existing project. +npx shadcn@latest init --preset base-nova +npx shadcn@latest init --defaults # shortcut: --template=next --preset=base-nova + +# Add components. +npx shadcn@latest add button card dialog +npx shadcn@latest add @magicui/shimmer-button +npx shadcn@latest add --all + +# Preview changes before adding/updating. +npx shadcn@latest add button --dry-run +npx shadcn@latest add button --diff button.tsx +npx shadcn@latest add @acme/form --view button.tsx + +# Search registries. +npx shadcn@latest search @shadcn -q "sidebar" +npx shadcn@latest search @tailark -q "stats" + +# Get component docs and example URLs. +npx shadcn@latest docs button dialog select + +# View registry item details (for items not yet installed). +npx shadcn@latest view @shadcn/button +
+
+Named presets: base-nova, radix-nova
+Templates: next, vite, start, react-router, astro (all support --monorepo) and laravel (not supported for monorepo)
+Preset codes: Base62 strings starting with a (e.g. a2r6bw), from ui.shadcn.com.
+
+## Detailed References
+
+- rules/forms.md — FieldGroup, Field, InputGroup, ToggleGroup, FieldSet, validation states
+- rules/composition.md — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading
+- rules/icons.md — data-icon, icon sizing, passing icons as objects
+- rules/styling.md — Semantic colors, variants, className, spacing, size, truncate, dark mode, cn(), z-index
+- rules/base-vs-radix.md — asChild vs render, Select, ToggleGroup, Slider, Accordion
+- cli.md — Commands, flags, presets, templates
+- customization.md — Theming, CSS variables, extending components
diff --git a/.agents/skills/shadcn/agents/openai.yml b/.agents/skills/shadcn/agents/openai.yml
new file mode 100644
--- /dev/null
+++ b/.agents/skills/shadcn/agents/openai.yml
@@ -1,0 +1,5 @@
+interface:
- display_name: "shadcn/ui"
- short_description: "Manages shadcn/ui components — adding, searching, fixing, debugging, styling, and composing UI."
- icon_small: "./assets/shadcn-small.png"
- icon_large: "./assets/shadcn.png"
diff --git a/.agents/skills/shadcn/assets/shadcn-small.png b/.agents/skills/shadcn/assets/shadcn-small.png
new file mode 100644
--- /dev/null
+++ b/.agents/skills/shadcn/assets/shadcn-small.png
@@ -1,0 +1,13 @@
+�PNG
+�
+���
IHDR����������������a����gAMA������a���� cHRM��z&��������������u0���`��:����p��Q<����eXIfMM�*�����������������������������J�����������R�(�����������i���������Z�������H�������H�����������������������������������������������o����� pHYs����������������YiTXtXML:com.adobe.xmp�����<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="XMP Core 6.0.0">
- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-
<rdf:Description rdf:about="" -
xmlns:tiff="http://ns.adobe.com/tiff/1.0/"> -
<tiff:Orientation>1</tiff:Orientation> -
</rdf:Description> - </rdf:RDF>
+</x:xmpmeta>
+�^������IDAT8�mSˊ�@���=x��� ���B�����D��ݣ��� ���!�S��ل�@�'���x�獍|���"�ܒ�l&�Ţ�t:������������[@ؖ˥��z=1B_�ve&I��U�j�R����G=���ʒ����� 0����lTo�[y�^�~�e�^�-�"����@��4U}8��( +�s��Ն ����8##'I�6��|>�|>���|>׳�f]mޙ�����_�W�Ft�p8��6��;7#3��h$��C.�����!�5���;3m���0�^%��_��9�2W�f��7m���������N[Ռ´a��n.u3�zֺa<Ap:��,�V����DZ�}߇�<Â�V#;�B� +�;��[ �2l�. �b���0m�F��>� �B@������j�6m�r������H0W�*���Z�M��������4{y{E�������IEND�B�
\ No newline at end of file
diff --git a/.agents/skills/shadcn/assets/shadcn.png b/.agents/skills/shadcn/assets/shadcn.png
new file mode 100644
--- /dev/null
+++ b/.agents/skills/shadcn/assets/shadcn.png
@@ -1,0 +1,22 @@
+�PNG
+�
+���
IHDR���d���d�����p�T����gAMA������a���� cHRM��z&��������������u0���`��:����p��Q<����eXIfMM�*�����������������������������J�����������R�(�����������i���������Z�������H�������H�����������������������������d�����������d����܁�B��� pHYs����������������YiTXtXML:com.adobe.xmp�����<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="XMP Core 6.0.0">
- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-
<rdf:Description rdf:about="" -
xmlns:tiff="http://ns.adobe.com/tiff/1.0/"> -
<tiff:Orientation>1</tiff:Orientation> -
</rdf:Description> - </rdf:RDF>
+</x:xmpmeta>
+�^���� �IDATx��]I��K�M�r,�y������j��_��]�7�(Jo��@�߹q'
+� ��#���"��r�OW����[p�T�Bp�J�C�=Qu����|��^F��Wy!^DFf��wNܸ7"���┗���E��,�VI?Hj�4_R��BJ�tJ�����t]�}I�?��/����8����0�q�������5I;$Q�-0�$C�(��"�6I��n�F���}���Z�&��8i�ڥ�$�0��ee�������7)wIBκ"�����I���)S4�3�f�w����j6�=zd�C�l������ ɀ��L��Eq������B@ʡC�L;���39u�]C���E��BO�<��2@�ѣG� ���q���r�%��M�������p��8� ���AL"G�&1���������)���?�!��jk�k�����g��P Q%,�Iҹ�����#������������'�X#��#;d��!�(������L�����������"�I�n*�����k�����@��C�+ �0����I]!�� � �/��'I ��"���B��́�pI���QR!�� �R��]��#U�����2���D��&��z�-
+�oBw�S�����J�C6���t�0j�(g���θq���n�͛7�۷oӀ��c�ޛ �
+�j�]!�[CC��p����;w�;m�4����� ��e�Nh��Ǐw�^�x�,^��ٽ{��z�j�����7�s���l�̙�|�� a�}Kϐ���z���'��g�6��ԩS�w���Ȱ�u�]�~�9FHI����>�S�� �&����ŋ��߿�w�}��"������͆�)S��&e��B2&M��q��%�n��6��R�|�b�ni��?����V��U� �B��ԩS�����P5��"���ӧOnkk�9��U%��3����W� �֊�pƌ��<{���2��[��/-x��7p.d���ΦM�Ly���&�>���G��B2�W;cǎu:::"�����C�������ײ���*��Gl,������!��y���Z�L�O̥% �˲!���t�5 ����������Z�
K�.�M�گ�BH�B[���!������
+W�4y
+x��!$���c2��BH�^�ɡe���m!$��T��\�S��K����K�&��Жє&�����:th�DPW> !���������'�g�_B�RR����U�V��#E"�I��������π���B�p?#i�����3"%�>� ���Df�z�ғ>�Ɉ XI��B��>��Ж:j���&�@ŽӇ5(-A�-�������Ay��B2�0�
"�u�I�&#�U[�3* m�
�F�l�G���0���/JhK��'��-rW�X�b�}����%K\��kH��%�{j��I8�,B[��㥼���[�p��/���j�����6��(�-�c���Dlٲ�=q�{��e�̙3�]��!�O=&LJm�B0��b���"A���
+�.u�{��G�Qw��y�<������}ۥ��9s�m��+S�=!��Ж=������v�C��K�?�ʳZ� ZS��=��pL��� �w����� �5k���,������:�#�I��W��sh-��+�Ύ�����th�}F�0��a�Ǒ MD�S�����'Ao�b@̾}� !���鋱/}B�F������ >���N��)Dr�o�d�pM�.s?��<x0߄� SI����R��g���3fx=:�0�D�Ǐ��m۶�v07��p;=�!H6��U��j24���t�w��5$��{�$h2�!�dغ�Ǟ�����gp]J��a����G2�kw�Ν�H���Ǩ�O�ɨ�Ж�R
���߿w[ZZ )���tŨφ���;}�2I������@�
��?���9����xm��l�������o)� M��� ��b��B2�z����<�j������D�ڵkM�N� {���Z�mG��a��d���������v֬YcrK�9y�!��������8���a��;��[�� ������B�l������O���/hm
+��J,��q���� � �%G����ڲ��/M��<6�a�>��]C��������!6����I�3�Ϡe$�v��S=!$�vhK=~X_�r��������3H�_�����!�6|�����/�}6B[FS)�������//��ު�T4��!6���Qɪ-�m���HF���l�rB�;�H C[�[u����AK� �-�K#�C���v��I����e���$�M���!g������ !4����B��q�b�U�:th���_5�SGS)����B��Ϗ��>l�p���v���^��Ahk��FA�^BC�{}��x ��m�(>�d�C��eD� �2��-u�����>���g]qѧO��d!AdD��GF���666��x�"�m���>��4ň��2������@y���ޫ��z*�Ӗ�%��.�g~����=� ���F�Q���g�����+#�V�E<�_����~���&#�0�/���^����it�d�Q�����p�u�H�2Bx��&h�6^�*� ����;v����;�崎��&�>�kS54Li�������tݺun[[[�����ӧO��!����i��+W"[�&���C��%��TG��.���y�f�ȑ#&�ڳg��>A�D'���g��B0���Fm�Ad�2*џ�9����%)p��/��V��㔗-[f�ݻw���&���}��5������c��?��EI� 0���e����;w��c����h1Ad�h����=YB�@�����Ћe����R�0A�v�����}F�=���,!�2 �������������̍%X
+�>}��=3/�y���ԗU������ͻre�t^�z%��_/o��lذ����ɓ'�� �ԋ�9��9�2���"�x��]��c>�Ç��� "drj��D�����g��o���JRP�Go�ˎ2��۫��c�//�KB��n%��?���QI!� @�;AHG�5�k���8[Z����������]���h�<�$�� �?�-����� �$�1.�\�LI����������}��ܗD+�_IKU!)!@��-����ɞ��c1=~oU�YD�X㟺!���J�mR��ݽ9�E����n��=�����$����"����x#��i��ЩtH�K��$a\�p��|!�#�N�B�����% ��?�7�� ��R� 0'�ba)�X +0�P���!�������G��$�8�V��"� �M�0Dǧh�Ygrz|l�"��c��pVXL �b3P����a��h�Y�'�����V +�A�I�����8��C�4v�d[$A0L�Z�9B}�F_��!�$(� +���x�Q_���$ +���f���+��}<��7K�Iҏ��$͓�(�������! ��X�AG�j�ŏ)�M��*�t" '-����IEND�B`�
\ No newline at end of file
diff --git a/.agents/skills/shadcn/cli.md b/.agents/skills/shadcn/cli.md
new file mode 100644
--- /dev/null
+++ b/.agents/skills/shadcn/cli.md
@@ -1,0 +1,257 @@
+# shadcn CLI Reference
+
+Configuration is read from components.json.
+
+> IMPORTANT: Always run commands using the project's package runner: npx shadcn@latest, pnpm dlx shadcn@latest, or bunx --bun shadcn@latest. Check packageManager from project context to choose the right one. Examples below use npx shadcn@latest but substitute the correct runner for the project.
+
+> IMPORTANT: Only use the flags documented below. Do not invent or guess flags — if a flag isn't listed here, it doesn't exist. The CLI auto-detects the package manager from the project's lockfile; there is no --package-manager flag.
+
+## Contents
+
+- Commands: init, add (dry-run, smart merge), search, view, docs, info, build
+- Templates: next, vite, start, react-router, astro
+- Presets: named, code, URL formats and fields
+- Switching presets
+
+---
+
+## Commands
+
+### init — Initialize or create a project
+
+bash +npx shadcn@latest init [components...] [options] +
+
+Initializes shadcn/ui in an existing project or creates a new project (when --name is provided). Optionally installs components in the same step.
+
+| Flag | Short | Description | Default |
+| ----------------------- | ----- | --------------------------------------------------------- | ------- |
+| --template <template> | -t | Template (next, start, vite, next-monorepo, react-router) | — |
+| --preset [name] | -p | Preset configuration (named, code, or URL) | — |
+| --yes | -y | Skip confirmation prompt | true |
+| --defaults | -d | Use defaults (--template=next --preset=base-nova) | false |
+| --force | -f | Force overwrite existing configuration | false |
+| --cwd <cwd> | -c | Working directory | current |
+| --name <name> | -n | Name for new project | — |
+| --silent | -s | Mute output | false |
+| --rtl | | Enable RTL support | — |
+| --reinstall | | Re-install existing UI components | false |
+| --monorepo | | Scaffold a monorepo project | — |
+| --no-monorepo | | Skip the monorepo prompt | — |
+
+npx shadcn@latest create is an alias for npx shadcn@latest init.
+
+### add — Add components
+
+> IMPORTANT: To compare local components against upstream or to preview changes, ALWAYS use npx shadcn@latest add <component> --dry-run, --diff, or --view. NEVER fetch raw files from GitHub or other sources manually. The CLI handles registry resolution, file paths, and CSS diffing automatically.
+
+bash +npx shadcn@latest add [components...] [options] +
+
+Accepts component names, registry-prefixed names (@magicui/shimmer-button), URLs, or local paths.
+
+| Flag | Short | Description | Default |
+| --------------- | ----- | -------------------------------------------------------------------------------------------------------------------- | ------- |
+| --yes | -y | Skip confirmation prompt | false |
+| --overwrite | -o | Overwrite existing files | false |
+| --cwd <cwd> | -c | Working directory | current |
+| --all | -a | Add all available components | false |
+| --path <path> | -p | Target path for the component | — |
+| --silent | -s | Mute output | false |
+| --dry-run | | Preview all changes without writing files | false |
+| --diff [path] | | Show diffs. Without a path, shows the first 5 files. With a path, shows that file only (implies --dry-run) | — |
+| --view [path] | | Show file contents. Without a path, shows the first 5 files. With a path, shows that file only (implies --dry-run) | — |
+
+#### Dry-Run Mode
+
+Use --dry-run to preview what add would do without writing any files. --diff and --view both imply --dry-run.
+
+bash +# Preview all changes. +npx shadcn@latest add button --dry-run + +# Show diffs for all files (top 5). +npx shadcn@latest add button --diff + +# Show the diff for a specific file. +npx shadcn@latest add button --diff button.tsx + +# Show contents for all files (top 5). +npx shadcn@latest add button --view + +# Show the full content of a specific file. +npx shadcn@latest add button --view button.tsx + +# Works with URLs too. +npx shadcn@latest add https://api.npoint.io/abc123 --dry-run + +# CSS diffs. +npx shadcn@latest add button --diff globals.css +
+
+When to use dry-run:
+
+- When the user asks "what files will this add?" or "what will this change?" — use --dry-run.
+- Before overwriting existing components — use --diff to preview the changes first.
+- When the user wants to inspect component source code without installing — use --view.
+- When checking what CSS changes would be made to globals.css — use --diff globals.css.
+- When the user asks to review or audit third-party registry code before installing — use --view to inspect the source.
+
+> npx shadcn@latest add --dry-run vs npx shadcn@latest view: Prefer npx shadcn@latest add --dry-run/--diff/--view over npx shadcn@latest view when the user wants to preview changes to their project. npx shadcn@latest view only shows raw registry metadata. npx shadcn@latest add --dry-run shows exactly what would happen in the user's project: resolved file paths, diffs against existing files, and CSS updates. Use npx shadcn@latest view only when the user wants to browse registry info without a project context.
+
+#### Smart Merge from Upstream
+
+See Updating Components in SKILL.md for the full workflow.
+
+### search — Search registries
+
+bash +npx shadcn@latest search <registries...> [options] +
+
+Fuzzy search across registries. Also aliased as npx shadcn@latest list. Without -q, lists all items.
+
+| Flag | Short | Description | Default |
+| ------------------- | ----- | ---------------------- | ------- |
+| --query <query> | -q | Search query | — |
+| --limit <number> | -l | Max items per registry | 100 |
+| --offset <number> | -o | Items to skip | 0 |
+| --cwd <cwd> | -c | Working directory | current |
+
+### view — View item details
+
+bash +npx shadcn@latest view <items...> [options] +
+
+Displays item info including file contents. Example: npx shadcn@latest view @shadcn/button.
+
+### docs — Get component documentation URLs
+
+bash +npx shadcn@latest docs <components...> [options] +
+
+Outputs resolved URLs for component documentation, examples, and API references. Accepts one or more component names. Fetch the URLs to get the actual content.
+
+Example output for npx shadcn@latest docs input button:
+
+```
+base radix
+
+input
- docs https://ui.shadcn.com/docs/components/radix/input
- examples https://raw.githubusercontent.com/.../examples/input-example.tsx
+button
- docs https://ui.shadcn.com/docs/components/radix/button
- examples https://raw.githubusercontent.com/.../examples/button-example.tsx
+```
+Some components include an api link to the underlying library (e.g. cmdk for the command component).
+
+### diff — Check for updates
+
+Do not use this command. Use npx shadcn@latest add --diff instead.
+
+### info — Project information
+
+bash +npx shadcn@latest info [options] +
+
+Displays project info and components.json configuration. Run this first to discover the project's framework, aliases, Tailwind version, and resolved paths.
+
+| Flag | Short | Description | Default |
+| ------------- | ----- | ----------------- | ------- |
+| --cwd <cwd> | -c | Working directory | current |
+
+Project Info fields:
+
+| Field | Type | Meaning |
+| -------------------- | --------- | ------------------------------------------------------------------ |
+| framework | string | Detected framework (next, vite, react-router, start, etc.) |
+| frameworkVersion | string | Framework version (e.g. 15.2.4) |
+| isSrcDir | boolean | Whether the project uses a src/ directory |
+| isRSC | boolean | Whether React Server Components are enabled |
+| isTsx | boolean | Whether the project uses TypeScript |
+| tailwindVersion | string | "v3" or "v4" |
+| tailwindConfigFile | string | Path to the Tailwind config file |
+| tailwindCssFile | string | Path to the global CSS file |
+| aliasPrefix | string | Import alias prefix (e.g. @, ~, @/) |
+| packageManager | string | Detected package manager (npm, pnpm, yarn, bun) |
+
+Components.json fields:
+
+| Field | Type | Meaning |
+| -------------------- | --------- | ------------------------------------------------------------------------------------------ |
+| base | string | Primitive library (radix or base) — determines component APIs and available props |
+| style | string | Visual style (e.g. nova, vega) |
+| rsc | boolean | RSC flag from config |
+| tsx | boolean | TypeScript flag |
+| tailwind.config | string | Tailwind config path |
+| tailwind.css | string | Global CSS path — this is where custom CSS variables go |
+| iconLibrary | string | Icon library — determines icon import package (e.g. lucide-react, @tabler/icons-react) |
+| aliases.components | string | Component import alias (e.g. @/components) |
+| aliases.utils | string | Utils import alias (e.g. @/lib/utils) |
+| aliases.ui | string | UI component alias (e.g. @/components/ui) |
+| aliases.lib | string | Lib alias (e.g. @/lib) |
+| aliases.hooks | string | Hooks alias (e.g. @/hooks) |
+| resolvedPaths | object | Absolute file-system paths for each alias |
+| registries | object | Configured custom registries |
+
+Links fields:
+
+The info output includes a Links section with templated URLs for component docs, source, and examples. For resolved URLs, use npx shadcn@latest docs <component> instead.
+
+### build — Build a custom registry
+
+bash +npx shadcn@latest build [registry] [options] +
+
+Builds registry.json into individual JSON files for distribution. Default input: ./registry.json, default output: ./public/r.
+
+| Flag | Short | Description | Default |
+| ----------------- | ----- | ----------------- | ------------ |
+| --output <path> | -o | Output directory | ./public/r |
+| --cwd <cwd> | -c | Working directory | current |
+
+---
+
+## Templates
+
+| Value | Framework | Monorepo support |
+| -------------- | -------------- | ---------------- |
+| next | Next.js | Yes |
+| vite | Vite | Yes |
+| start | TanStack Start | Yes |
+| react-router | React Router | Yes |
+| astro | Astro | Yes |
+| laravel | Laravel | No |
+
+All templates support monorepo scaffolding via the --monorepo flag. When passed, the CLI uses a monorepo-specific template directory (e.g. next-monorepo, vite-monorepo). When neither --monorepo nor --no-monorepo is passed, the CLI prompts interactively. Laravel does not support monorepo scaffolding.
+
+---
+
+## Presets
+
+Three ways to specify a preset via --preset:
+
+1. Named: --preset base-nova or --preset radix-nova
+2. Code: --preset a2r6bw (base62 string, starts with lowercase a)
+3. URL: --preset "https://ui.shadcn.com/init?base=radix&style=nova&..."
+
+> IMPORTANT: Never try to decode, fetch, or resolve preset codes manually. Preset codes are opaque — pass them directly to npx shadcn@latest init --preset <code> and let the CLI handle resolution.
+
+## Switching Presets
+
+Ask the user first: reinstall, merge, or skip existing components?
+
+- Re-install → npx shadcn@latest init --preset <code> --force --reinstall. Overwrites all component files with the new preset styles. Use when the user hasn't customized components.
+- Merge → npx shadcn@latest init --preset <code> --force --no-reinstall, then run npx shadcn@latest info to get the list of installed components and use the smart merge workflow to update them one by one, preserving local changes. Use when the user has customized components.
+- Skip → npx shadcn@latest init --preset <code> --force --no-reinstall. Only updates config and CSS variables, leaves existing components as-is.
+
+Always run preset commands inside the user's project directory. The CLI automatically preserves the current base (base vs radix) from components.json. If you must use a scratch/temp directory (e.g. for --dry-run comparisons), pass --base <current-base> explicitly — preset codes do not encode the base.
diff --git a/.agents/skills/shadcn/customization.md b/.agents/skills/shadcn/customization.md
new file mode 100644
--- /dev/null
+++ b/.agents/skills/shadcn/customization.md
@@ -1,0 +1,202 @@
+# Customization & Theming
+
+Components reference semantic CSS variable tokens. Change the variables to change every component.
+
+## Contents
+
+- How it works (CSS variables → Tailwind utilities → components)
+- Color variables and OKLCH format
+- Dark mode setup
+- Changing the theme (presets, CSS variables)
+- Adding custom colors (Tailwind v3 and v4)
+- Border radius
+- Customizing components (variants, className, wrappers)
+- Checking for updates
+
+---
+
+## How It Works
+
+1. CSS variables defined in :root (light) and .dark (dark mode).
+2. Tailwind maps them to utilities: bg-primary, text-muted-foreground, etc.
+3. Components use these utilities — changing a variable changes all components that reference it.
+
+---
+
... diff truncated: showing 800 of 118959 lines
</details>
<sub>You can send follow-ups to the cloud agent <a href="https://cursor.com/agents/bc-0fedc8e9-fdef-4337-8468-9a58fe4500fc">here</a>.</sub>
<!-- BUGBOT_AUTOFIX_REVIEW_FOOTNOTE_END -->
<sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 21af4b4a1ee5e95f0bcf7e1a30ed21aca7e45c73. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup>
Set reuseExistingServer to false for tanstack to match nextjs and react-router configurations, preventing stale in-memory test data from causing flaky test failures.
… enhance route generation logic
2 participants
Summary
@btst/codegen init@btst/codegen initType of change
Checklist
pnpm buildpassespnpm typecheckpassespnpm lintpassesdocs/content/docs/) if consumer-facing types or behavior changedScreenshots
Note
Medium Risk
Medium risk because it changes CI test execution paths and removes existing demo app sources, which could reduce coverage or break workflows if the codegen setup scripts or Playwright config drift.
Overview
Shifts testing and developer guidance from committed example/demo apps to scratch-built
codegen-projects/that mirror thebtst initcodegen output, including updated docs/checklists and new Playwright command conventions (ports 3006–3008).Adds a dedicated GitHub Actions workflow
codegen-e2e.ymlto build each framework’s codegen project from scratch and run Playwright, and removes the legacye2e.ymlandexamples.ymlworkflows.Introduces a new internal
.agents/skills/shadcnknowledge pack (CLI reference, styling/forms/composition rules, evals) and cleans up repo noise by ignoringcodegen-projects/+ new Playwright artifacts, updating Biome excludes, and deleting the standalonedemos/ai-chatproject anddemos/README.mdin favor of the hosted playground links inREADME.md.Reviewed by Cursor Bugbot for commit 851fe0c. Bugbot is set up for automated code reviews on this repo. Configure here.